<template>
  <div class="message">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"
        ><MoreMessage :dataList="chatList" @transPage="changePage"></MoreMessage
      ></el-tab-pane>
      <el-tab-pane label="朋友私信" name="second">
        <MoreMessage :dataList="chatList" @transPage="changePage"></MoreMessage>
      </el-tab-pane>
      <el-tab-pane label="群消息" name="fourth"
        ><MoreMessage :dataList="chatList" @transPage="changePage"></MoreMessage
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getChatTypeListApi } from "@/api/chatWindow";
import MoreMessage from "@/components/MoreMessage.vue";
export default {
  data() {
    return {
      activeName: "first",
      chatList: [],
      talkType: 0,
      currentPage: 1,
      userInfo: this.$store.state.userInfo,
    };
  },
  components: {
    MoreMessage,
  },
  created() {
    this.getChatTypeListFun();
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
      this.getChatTypeListFun();
    },
   getChatTypeListFun() {
      getChatTypeListApi({
        userId: this.userInfo.userId,
        talkType: this.talkType,
        talkPage: this.currentPage
      }).then((res) => {
        if (res.data.code == 200) {
          this.chatList = res.data.data;
        }
      });
    },
    handleClick(tab, event) {
      var index = tab.index;
      this.talkType = index;
      this.currentPage = 1;
      this.getChatTypeListFun();
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.message {
  width: 96%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin: auto;
}
</style>
